<template>
  <div style="background-color: #f4f4f4;">
    <div class="nav">
      <van-icon name="arrow-left" size="22" @click="$router.back()" />
    </div>
    <div class="content">
      <video
        ref="video"
        width="375"
        height="240"
        preload
        controls
      >
        <source :src="moviesid" type="video/mp4" />
      </video>
      <div class="user">
        <div class="top">{{ moviesitemname }}</div>
        <div class="bottom">
          <div class="img" v-if="itemuname==undefined"></div>
          <div class="img"><img :src="itemuser" alt="" /></div>
          <div class="usrname" v-if="itemuname==undefined"></div>
          <div class="usrname">{{ itemuname }}</div>
          <div class="icon">
            <img
              src="https://p0.meituan.net/moviemachine/5aaa710d72c78d6553be83f43bc9e4f3946.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

var moviesid = ref(`${route.query.video}`);
var moviesitemname = ref(`${route.query.itemmovname}`);
var itemuser = ref(`${route.query.itemuser}`);
var itemuname = ref(`${route.query.itemuname}`);
// console.log("moviesid", moviesid.value);
// console.log("moviesitemname", moviesitemname.value);
// console.log("itemuser", itemuser.value);
// console.log("itemuname", itemuname.value);
</script>

<style lang="scss" scoped>
.nav {
  width: 100vw;
  background-color: #e54847;
  position: fixed;
  top: 0;
  z-index: 999;
    font-size: 22rem;
  i{
    line-height: 40rem;
    color: #fff;
  }
}
.content {
  margin-top: 40rem;
  .user {
    padding: 14rem 15rem 15rem;
    .top {
      font-size: 15rem;
      color: #333;
    }
    .bottom {
      margin: 8rem 0 0;
      display: flex;
      .img {
        width: 25rem;
        height: 25rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          display: block;
        }
      }
      .usrname {
        color: #333;
        font-size: 13rem;
        margin: 0 4rem 0 8rem;
        display: flex;
        align-items: center;
      }
      .icon {
        width: 12rem;
        height: 12rem;
        margin: auto 0;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}
</style>
